<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Task List</title>
<style type="text/css">
*{margin:0;padding:0;}
body{min-width:200px;color:#333;overflow: hidden;margin: 0px;padding:10px;background: white;font-size:12px;}
.btn{color:#fff;margin:10px;-webkit-border-radius: 8px;padding: 5px 10px;background: -webkit-linear-gradient(top, #3E779D, #65A9D7);cursor:pointer;-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;width:100px;color: white;font-size: 12px;}
</style>
</head>
<body>
<div class="btn" id="drawHeatMap">draw HeatMap</div>
<div id="hideCanvas" class="btn">hide</div>
<div id="startRecord" class="btn" style="display:none">realtime record</div>
<script type="text/javascript">

/**
 * get Element by id
 * @param {string}  id id名
 * @return {domElement}
 */
function $(id){
	return document.getElementById(id);
}


$("hideCanvas").addEventListener("click",function() {
	goto({"hideCanvas":1});
});
$("drawHeatMap").addEventListener("click",function() {
	goto({"drawHeatMap":1});
});

$("startRecord").addEventListener("click",function() {
	goto({"startRecord":1});
});


/**
 * send message to content script
 * @param {json} data key/value
 */
function goto(data){
    chrome.tabs.getSelected(null, function(tab) {			
		chrome.tabs.sendRequest(tab.id, data,function(response) {		
			if(response.num != undefined) {
			}

		});
   });
}

</script>
</body>
</html>
